.container{
    background-color: #EDEFF0;
}
.photo{
    width: 341px;
    height: 420px;
    display: inline-block;
    position: relative;
}
.img {
    width: 320px;
    height: 322px;
    margin-left: 15px;
    position: absolute;
    z-index:10;
    top:0;
    left: 0;
    transition: all 1s;
    background: url("../images/thumb-christopher-walken.jpg") no-repeat 100%/100%;
}
/*#mycanvas{*/
    /*margin-top: -16px;*/
/*}*/

.photoBottom .word{
    display: inline-block;
    position: relative;
    left: 0;
}
.photoBottom{
    width: 100%;
    height: 101px;
    color: white;
    background-color: #FF2F1E ;
    margin-top: -1px;
    text-align: left;
    padding: 20px 0 0 30px;
    position: absolute;
    top:322px;
    transition: all 1s;
    z-index: 1;
}
.photoBottom .sanjiao{
    width: 0;
    height: 0;
    border-bottom: 15px solid #FF2F1E;
    border-left: 15px solid transparent;
    position: absolute;
    bottom: 96px;
    left: -30px;
    transition: all 1s;
}

.photoBottom h3{
    font-weight: bold;
    font-size: 26px;
    margin: 0 0 20px 0;
}
.rightSpan{
    font-size: 20px;
}
.btn{
    width: 49px;
    height: 49px;
    background-color: #FF2F1E;
    color: white;
    border: solid 3px white;
    border-radius: 100%;
    padding-top: 10px;
    font-size: 22px;
    position: absolute;
    top:35px;
    right: 30px;
    transition: all 1s;
    z-index: 10;
}
.introduce{
    width:341px ;
    height: 420px;
    position: absolute;
    left: 53px;
    top:1px;
    z-index:0;
    /*display: none;*/
}

.introduceBtn{
    width: 49px;
    height: 49px;
    background-color:#FF2F1E ;
    border: solid 3px white;
    border-radius: 100%;
    position: absolute;
    top:35px;
    right: 83px;
    color: white;
    padding: 12px;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    transition:all 1s ease;
}

.introduceCenter{
    width: 320px;
    height: 320px;
    background-color: #FCE4EC;
    margin-left: 17px;
    padding:20px 35px;
    overflow: hidden;
}


.introduce p{
    display: inline-block;
    font-size: 19px;
    text-align: left;
}
.introduceCenter span{
    font-size:25px ;
    color: #E91E63;
    display: inline-block;
    float: left;
}
.introduceBlow{
    width: 320px;
    height: 103px;
    background-color: #F8C0CA;
    margin-left: 17px;
    position: absolute;
    overflow: hidden;
    bottom: -1px;
}
.introduceBlowImg{
    width: 40px;
    height: 40px;
    margin:20px 10px 0 0;
    display: inline-block;
    cursor: pointer;
    position: relative;
    top:100px;
    transition: 1s;
}
.img1{
     background: url("../images/1.png");
     transition: all .5s;
 }
.img2{
    background: url("../images/2.png");
    transition: all .8s;
}
.img3{
    background: url("../images/3.png");
    transition: all 1.1s;
}
.img4{
    background: url("../images/4.png");
    transition: all 1.4s;
}
.text{
    position: relative;
    top:300px;
    transition: all 1s;
}
#photoImg1{
    background:url("../images/thumb-clint-eastwood.jpg") 100%/101%;
}
#photoBottom1{
    background-color: #FF0052;
}
#photoBtn1{
    background-color: #FF0052;
}
#introduceBtn1{
    background-color: #FF0052 ;
}

#photoImg2{
    background:url("../images/thumb-dustin-hoffman.jpg") 100%/101%;
}
#photoBottom2{
    background-color: #AE21A6;
}
#photoBtn2{
    background-color: #AE21A6;
}
#introduceBtn2{
    background-color: #AE21A6 ;
}
#wordSanjiao2{
    border-bottom: 15px solid #AE21A6;
    border-left: 15px solid transparent;
}
#photoImg3{
    background:url("../images/thumb-edward-norton.jpg") 100%/101%;
}
#photoBottom3{
    background-color: #6C3AAF;
}
#photoBtn3{
    background-color: #6C3AAF;
}
#introduceBtn3{
    background-color: #6C3AAF ;
}
#wordSanjiao3{
    border-bottom: 15px solid #6C3AAF;
    border-left: 15px solid transparent;
}
#photoImg4{
    background:url("../images/thumb-michael-caine.jpg") 100%/101%;
}
#photoBottom4{
    background-color: #3551AE;
}
#photoBtn4{
    background-color: #3551AE;
}
#introduceBtn4{
    background-color: #3551AE ;
}
#wordSanjiao4{
    border-bottom: 15px solid #3551AE;
    border-left: 15px solid transparent;
}
#photoImg5{
    background:url("../images/thumb-sean-penn.jpg") 100%/101%;
}
#photoBottom5{
    background-color: #0096F2;
}
#photoBtn5{
    background-color: #0096F2;
}
#introduceBtn5{
    background-color: #0096F2 ;
}
#wordSanjiao5{
    border-bottom: 15px solid #0096F2;
    border-left: 15px solid transparent;
}

